<template>
	<view class="content" v-if="info.order_sn">
		<view>
			<view class="cu-form-group">
				<view class="title light">状态</view>
				<!-- <view class="picker" v-if="info.status == -1">己取消</view>
				<view class="picker" v-if="info.status == 1">等待接单</view>
				<view class="picker" v-if="info.status == 2">商家己接单</view>

				<view class="picker" v-if="info.status == 3">己完成</view>
				<view class="picker" v-if="info.status == 4">己评价</view> -->

				<view v-if="info.status == -1" class="cu-tag round bg-gray light">己取消</view>
				<view v-if="info.status == 1" class="cu-tag round bg-red light">等待接单</view>
				<view v-if="info.status == 2" class="cu-tag round bg-olive light">己接单</view>
				<view v-if="info.status == 3" class="cu-tag round bg-blue light">已完成</view>
				<view v-if="info.status == 4" class="cu-tag round bg-blue light">已评价</view>
			</view>

			<view class="cu-form-group">
				<view class="title light">服务内容</view>
				<view class="picker">{{ info.title }}</view>
			</view>

			<view class="cu-form-group">
				<view class="title light">上门地址</view>
				<view class="picker" @click="openAddress">{{ info.data.address }}</view>
				<text class="cuIcon-locationfill text-orange" @click="openAddress"></text>
			</view>

			<view class="cu-form-group">
				<view class="title light">联系姓名</view>
				<view class="picker">{{ info.data.name }}</view>
			</view>

			<view class="cu-form-group">
				<view class="title light">手机号</view>
				<view class="picker" @click="callUserPhone">
					{{ info.data.phone }}
					<text></text>
					<text class="cuIcon-dianhua text-orange"></text>
				</view>
			</view>

			<view class="cu-form-group">
				<view class="title light">创建时间</view>
				<view class="picker">{{ info.addtime }}</view>
			</view>

			<view class="cu-form-group">
				<view class="title light">订单号</view>
				<view class="picker">{{ info.order_sn }}</view>
			</view>

			<view class="cu-form-group" v-if="info.paytime">
				<view class="title light">支付时间</view>
				<view class="picker">{{ info.paytime }}</view>
			</view>
		</view>
		<view v-if="info.order_amount && info.data.provider_name">
			<view style=" padding: 20upx;">商家报价信息</view>
			<view class="cu-form-group">
				<view class="title light">报价</view>
				<view class="picker">¥ {{ info.order_amount }}</view>
			</view>
			<view class="cu-form-group">
				<view class="title light">联系人</view>
				<view class="picker">{{ info.data.provider_name }}</view>
			</view>
			<view class="cu-form-group">
				<view class="title light">手机号</view>
				<view class="picker" @click="callUserProviderPhone">
					{{ info.data.provider_phone }}
					<text class="cuIcon-dianhua text-orange"></text>
				</view>
			</view>
			<view class="cu-form-group">
				<view class="title light">备注</view>
				<view class="picker">{{ info.data.provider_remark }}</view>
			</view>
		</view>
		<view style="height: 120upx;"></view>
		<view v-if="info.status == 1" @click="cancelOrder" class="fixed-btn cu-btn block bg-blue  lg">取消订单</view>
		<view @click="pay" v-if="info.status == 2" class="fixed-btn ">
			<button @click="postOrder" class="cu-btn block bg-blue  lg">
				<text :class="loadding == 1 ? 'cuIcon-loading2 cuIconfont-spin' : 'cuIconfont-spin'"></text>
				支付 {{ info.order_amount }} 元
			</button>
		</view>
		<navigator :url="'/pages/order/comment?order_sn=' + info.order_sn" v-if="info.status == 3" class="fixed-btn cu-btn block bg-blue  lg">评价商家</navigator>
	</view>
</template>
<style>
.cu-form-group .title {
	max-width: 160upx;
	min-width: 160upx;
}
</style>
<script>
import beeApp from '../../beeApp.js';

export default {
	data() {
		return {
			info: {
				data: {}
			},
			user_info: {},
			order_sn: '',
			loadding: 0,
			loadding1: 0
		};
	},
	onLoad(option) {
		this.order_sn = option.order_sn;
		this.getinfo();
	},
	onShow: function() {
		var reload = beeApp.getPageData('pages/order/detail', 'reload');
		if (reload == 1) {
			beeApp.setPageData('pages/order/detail', { reload: 0 });
			this.getinfo();
		}
	},
	onPullDownRefresh() {
		this.getinfo();
		uni.stopPullDownRefresh();
	},
	methods: {
		pay: function() {
			var that = this;
			that.loadding = 1;
			beeApp.api(
				'/apiv2/dao_jia/createPayOrderSN',
				{
					order_sn: this.order_sn,
				},
				function(res) {
					if (res.code != 200) {
						that.loadding = 0;
						beeApp.alert(res.msg);
						return;
					}
					beeApp.pay(
						res.data.order_sn,
						res => {
							that.loadding = 0;
							uni.showModal({
								title: '支付成功',
								content: '恭喜您，支付成功！'
							});
							beeApp.setPageData("pages/order/list",{reload:1});
							that.getinfo();
						},
						res => {
							that.loadding = 0;
						}
					);
				}
			);
		},
		openAddress: function() {
			const latitude = this.info.data.latitude;
			const longitude = this.info.data.longitude;
			uni.openLocation({
				latitude: latitude,
				longitude: longitude,
				success: function() {
					console.log('success');
				}
			});
		},
		callUserPhone: function() {
			uni.makePhoneCall({
				phoneNumber: this.info.data.phone
			});
		},
		callUserProviderPhone: function() {
			uni.makePhoneCall({
				phoneNumber: this.info.data.provider_phone
			});
		},
		cancelOrder: function() {
			var that = this;
			if (that.loadding == 1) {
				return;
			}
			that.loadding = 1;
			uni.showModal({
				title: '提示',
				content: '确认取消订单吗？',
				success: function(res) {
					if (res.confirm) {
						beeApp.api(
							'apiv2/dao_jia/cancel',
							{
								order_sn: that.order_sn
							},
							function(res) {
								that.loadding = 0;
								if (res.code != 200) {
									beeApp.alert(res.msg);
									return;
								}
								beeApp.setPageData("pages/order/list",{reload:1});
								that.getinfo();
							}
						);
					} else if (res.cancel) {
						console.log('用户点击取消');
						that.loadding = 0;
					}
				}
			});
		},
		getinfo: function() {
			var that = this;
			beeApp.api(
				'apiv2/order/find',
				{
					order_sn: this.order_sn
				},
				function(res) {
					if (res.code != 200) {
						beeApp.alert(res.msg);
						return;
					}
					if (res.data.data) {
						res.data.data = JSON.parse(res.data.data);
					}
					that.info = res.data;
				}
			);
		}
	}
};
</script>
